<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	<div>
	    <select style="width:60px" multiple size="10" id="leftID">
	        <option>选项A</option>
	        <option>选项B</option>
	        <option>选项C</option>
	        <option>选项D</option>
	        <option>选项E</option>
	    </select>
	</div>
	<div style="position:absolute;left:100px;top:60px">
	    <input type="button" value="批量右移" id="rightMoveID" />
	</div>
	<div style="position:absolute;left:100px;top:90px">
	      <input type="button" value="全部右移" id="rightMoveAllID" />
	</div>
	<div style="position:absolute;left:220px;top:20px">
	      <select multiple size="10" style="width:60px" id="rightID"></select>
	</div>
	<div style="position:absolute;left:100px;top:130px">
	    <input type="button" value="批量左移" id="leftMoveID" />
	</div>
	<div style="position:absolute;left:100px;top:160px">
	    <input type="button" value="全部左移" id="leftMoveAllID" />
	</div>

	</body>
	<script src="jQuery/jquery-3.7.1.js"></script> 
	<script type="text/javascript">
	$(function(){
	      $("#leftID").dblclick(function() {
	        var $option = $("#leftID option:selected");
	        $("#rightID").append($option);
	    });
	      $("#rightMoveID").click(function() {
	        var $option = $("#leftID option:selected");
	        $("#rightID").append($option);
	    });
	     $("#rightMoveAllID").click(function() {
	        var $option = $("#leftID option");
	        $("#rightID").append($option);
	    });
		// 批量左移功能
		$("#leftMoveID").click(function() {
		    var $option = $("#rightID option:selected");
		    $("#leftID").append($option);
		});
		
		// 全部左移功能
		$("#leftMoveAllID").click(function() {
		     var $option = $("#rightID option");
		       $("#leftID").append($option);
		 });
	})
	</script>
</html>